<template>
<div>
  <el-dialog title="组织架构" :visible.sync="orgDialogVisible" append-to-body :before-close="handleClose">
    <el-form :rules="rules" ref="form" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
    <el-button type="primary" @click="handleAdd">新增部门</el-button>

  <div class="custom-tree-container">
  <div class="block">
    <el-tree
      :data="tree_data"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <el-input size='mini' v-if="data.editable" v-model="data.label" style="height:22px!important;"></el-input>
        <span v-else >{{ node.label }}</span>
        <span  v-if="data.editable"> 
            <i class='el-icon-close' @click='close(node,data)' title='取消'></i>
            <i class='el-icon-check' @click='check(node,data)' title='确定'></i>
        </span> 
        <span v-else>
            <i class='el-icon-plus' @click='append(data)' title='新建子部门'></i>
            <i class='el-icon-edit' @click='edit(node,data)' title='编辑部门'></i>
            <i class='el-icon-delete' @click='remove(node,data)' title='删除部门'></i>
        </span>
      </span>
    </el-tree>
  </div>
</div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">{{$t('table.cancel')}}</el-button>
      <el-button type="primary" @click="save()">保存</el-button>
    </div>
  </el-dialog>
</div>
</template>


<script>
import API from '@/utils/backend_api'
import waves from '@/directive/waves' // 水波纹指令
export default {
  name: 'orgDialog',
  props: {
    id: {
      type: String,
      default: '' // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    }
  },
  directives: {
    waves
  },
  data() {
    return {
      org_data: {},
      tree_data: [],
      rules: {},
      temp: {},
      orgDialogVisible: false
    }
  },
  filters: {
  },
  created() {
  },
  watch: {
    id: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      if (val && val !== '') {
        API.company_org.get(val).then(response => {
          console.log(response)
          this.org_data = response.data
          if (this.org_data && this.org_data.dept_org) {
            this.tree_data = JSON.parse(this.org_data.dept_org)
          }
        })
      }
    },
    visible: function(val, oldVal) {
      this.orgDialogVisible = val
    }
  },
  methods: {
    handleAdd() {
      API.company_org.newid(this.id).then(response => {
        console.log(response)
        if (response.data) {
          this.tree_data.push({
            id: response.data,
            label: '新部门',
            editable: true,
            children: []
          })
        }
      })
    },
    append(data) {
      API.company_org.newid(this.id).then(response => {
        console.log(response)
        if (response.data) {
          const newChild = { id: response.data, label: '新子部门', editable: true, children: [] }
          if (!data.children) {
            this.$set(data, 'children', [])
          }
          data.children.push(newChild)
        }
      })
    },
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    edit(node, data) {
      console.log(node)
      node.data.editable = true
      node.data.temp_data = node.data.label
    },
    close(node, data) {
      console.log(node)
      if (node.data.temp_data) {
        node.data.label = node.data.temp_data
      }
      node.data.editable = false
    },
    check(node, data) {
      console.log(node)
      if (node.data.temp_data) {
        node.data.temp_data = null
      }
      node.data.editable = false
    },
    handleClose() {
      this.temp = {}
      this.$emit('closeDialog', { type: 'cancel', data: this.tree_data })
    },
    save() {
      API.company_org.update(this.id, { dept_org: JSON.stringify(this.tree_data) }).then(response => {
        console.log(response)
        this.$emit('closeDialog', { type: 'success', data: this.tree_data })
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>